<!-- 页面 -->
<template>
	<s-layout navbar="custom">
		<view>
			<view class="vasp-box uni-padding-wrap uni-border">
				<view class="vasp_title">
					{{state.vasp_data.con.ordertitle}}
				</view>
				<!-- <view class="vasp_con">
					兑换日期：{{state.vasp_data.con.insertdate}}<br>
					服务包有效期：{{state.vasp_data.con.overdate}}<br>
				</view> -->
			</view>

			<uni-section class="vasp_box" v-for="item in state.vasp_data.con.list">
				<uni-title type="h4" align="left" color="#000000" :title="item.name">
				</uni-title>
				<uni-list>
					<uni-list-item v-for="item2 in item.data" ellipsis="2"
                         :title="item2.children.title"
						              @click="goDetailPage(item2.children)" size="14"
                         :rightText="item.name==='资料'?'点击下载':'点击查看'"
                         clickable
          />
<!--          <template v-slot:footer>
            {{item.name==='资料'?'点击下载':'点击查看'}}
          </template>-->
<!--          <view slot="right" style="color:#d00500">{{ item.name==='资料'?'点击下载':'点击查看' }}</view>-->
				</uni-list>
			</uni-section>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		formatOrderColor
	} from '@/sheep/hooks/useGoods';
	import sheep from '@/sheep';
	import _ from 'lodash';
	import {
		isEmpty
	} from 'lodash';
	import HMfilterDropdown from '@/sheep/components/HM-filterDropdown/HM-filterDropdown.vue';
	import dhzengzhi from '@/sheep/api/dhzengzhi';
  import { downloadFile } from '@/sheep/helper/download';
	const tradeManaged = computed(() => sheep.$store('app').has_wechat_trade_managed);


	// 数据
	const state = reactive({
		tikuList: [],
		loadStatus: '',
		vasp_data: {},
	});
  function handleDownload (contentid,title){
    sheep.$api.dhzengzhi.goodsziliao({
      'contentid':contentid,
    }).then((res) => {
      //console.log(res.data);
      downloadFile(res.data.download_url, title);
    })

  }
	function navigateTo(path) {
		sheep.$router.go(path);
	}

	function goDetailPage(item) {
		//console.log(item);
		if (item.content_type == 'lubo' || item.content_type == 'zhibo') {
			var course = {
				content_type: item.content_type,
				goods_id: item.id
			};
			sheep.$router.navigatorToCourse(course);
		} else if (item.content_type == 'ziliao') {
			//资料下载
      handleDownload(item.content_id,item.title);
      // sheep.$router.navigatorToZiliao(item.id, 'goods');
		} else if (item.content_type == 'tiku') {
			sheep.$router.navigatorToTiku(item.id, item.content_id);
		}
	}

	//获取详细信息，进行初始化
	function getZengzhibaoList(options) {
		sheep.$api.dhzengzhi.getZengzhibaoList(options).then((res) => {
			state.vasp_data = res.data;
      console.log(state.vasp_data);
		})
	}
	onLoad(async (options) => {
		getZengzhibaoList(options);
	});
</script>

<style lang="scss" scoped>
  uni-text.uni-list-item__extra-text-2{
    color: #d00500 !important;
  }
  uni-text.uni-list-item__extra{
    .uni-list-item__extra-text{

        color: #d00500 !important;

    }

  }
	.page-tiele-kc {
		text-align: center;
		line-height: 48rpx;
		font-size: 38rpx;
		font-weight: bold;
	}

	.uni-common-mt {
		margin-top: 15px
	}

	.uni-padding-wrap {
		padding: 0 15px;
	}

	.vasp_box {
		margin: 0 15px;
	}

	.vasp_title {
		font-size: 1.1875rem;
		color: #2b2b2b;
		font-size: 18px;
	}

	.vasp_con {
		background-color: #fdfdfd;
		color: #2b2b2b;
		text-align: left;
		line-height: 58rpx;
		font-size: 30rpx;
		padding: 20px;
		border-radius: 0 0 7px 7px;
	}

	.ss-order-card-warp {
		padding: 20rpx;

		.img-box {
			width: 184rpx;
			height: auto;
			border-radius: 10rpx;
			overflow: hidden;

			.order-img {
				width: 184rpx;
				height: auto;
			}
		}

		.box-right {
			flex: 1;
			position: relative;
		}

		.title-text {
			font-size: 30rpx;
			font-weight: 500;
			line-height: 40rpx;
		}
	}

	:deep(.uni-tooltip-popup) {
		background: var(--ui-BG);
	}

	.warning-color {
		color: #faad14;
	}

	.danger-color {
		color: #ff3000;
	}

	.success-color {
		color: #52c41a;
	}

	.info-color {
		color: #999999;
	}
</style>